import React from 'react';
import { Layout, Typography } from 'antd';

const { Content } = Layout;
const { Title, Paragraph } = Typography;

interface SettingsLayoutProps {
  title: string;
  description?: string;
  icon?: React.ReactNode;
  children: React.ReactNode;
  extra?: React.ReactNode;
}

const SettingsLayout: React.FC<SettingsLayoutProps> = ({
  title,
  description,
  icon,
  children,
  extra,
}) => {
  return (
    <div style={{
      height: '100%',
      overflow: 'auto',
      padding: '24px'
    }}>
      {/* 页面标题 */}
      <div style={{ 
        marginBottom: '24px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start'
      }}>
        <div>
          <Title level={3} style={{ margin: 0, marginBottom: '8px' }}>
            {icon && <span style={{ marginRight: '8px' }}>{icon}</span>}
            {title}
          </Title>
          {description && (
            <Paragraph type="secondary" style={{ margin: 0 }}>
              {description}
            </Paragraph>
          )}
        </div>
        {extra && <div>{extra}</div>}
      </div>

      {/* 内容区域 */}
      {children}
    </div>
  );
};

export default SettingsLayout; 